<template>
<el-container>
  <el-header>
    <el-row>
      <el-col>
        <el-button type="primary" size="small" @click="toBack">返回</el-button>
      </el-col>
    </el-row>
  </el-header>
  <el-main style="height: auto;">
    <el-card style="width: 30%; height: auto; margin: 5vh auto;">
      <el-form :model="form" ref="form" :rules="formRules">
        <el-row>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="套餐名称" label-width="110px" prop="mealName">
              <el-input size="small" style="width: 100%;" v-model="form.mealName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="套餐类型" label-width="110px" prop="dictMealType">
              <el-select v-model="form.dictMealTypeName" placeholder="请选择" style="width: 100%;" size="small">
                <el-option v-for="dictOperator in form.dictMealTypeSelect" :key="dictOperator.value" :label="dictOperator.label" :value="dictOperator.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="套餐价格" label-width="110px" prop="officialPrice">
              <el-input size="small" style="width: 100%;" v-model="form.officialPrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="有效期" label-width="110px" required>
              <el-col :xl="{ span: 6 }" :lg="{ span: 11 }">
                <el-input size="small" style="width: 100%;" v-model="form.terOfValidity"></el-input>
              </el-col>
              <el-col :xl="{ span: 6 }" :lg="{ span: 11, push: 2 }">
                <el-form-item prop="dictTerOfValidity">
                  <el-select size="small" v-model="form.dictTerOfValidityName" placeholder="有效期" style="width: 100%;">
                    <el-option v-for="timeType in form.dictTerOfValiditySelect" :key="timeType.value" :label="timeType.label" :value="timeType.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item class="a" label="套餐规格" label-width="110px" required>
              <el-col :xl="{ span: 6 }" :lg="{ span: 11 }">
                <el-form-item prop="mealSpec">
                  <el-input size="small" style="width: 100%;" v-model="form.mealSpec"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xl="{ span: 6 }" :lg="{ span: 11, push: 2 }">
                <el-form-item prop="unit">
                  <el-select size="small" v-model="form.unit" placeholder="单位" style="width: 100%;">
                    <el-option v-for="unit in form.unitSelect" :key="unit.value" :label="unit.label" :value="unit.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label="可否连续充值" label-width="110px" prop="dictIsTerOfValiditySuper">
              <el-radio-group v-model="form.dictIsTerOfValiditySuper">
                <el-radio label="YES">是</el-radio>
                <el-radio label="NO">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xl="{ span: 20, push: 1 }" :lg="{ span: 20, push: 1 }">
            <el-form-item label-width="110px">
              <el-button size="small" type="primary" @click="submitPrimaryFlowPoolHandle('form')">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </el-main>
</el-container></template>

<script>
import { packageDetail, packageconserve } from '../../../api/getData'

export default {
  name: 'EditPackage',
  data() {
    return {
      id: '',
      dictMealType: '',
      dictTerOfValidity: '',
      fileRules: {
        excel: [
          { required: true }
        ]
      },
      fileList: {
        excel: ''
      },
      dictOperator: '',
      form: {
        mealName: '',
        dictMealTypeName: '',
        dictMealTypeSelect: [
          {
            value: 'SETMEAL_BASE',
            label: '基础套餐'
          },
          {
            value: 'SETMEAL_ADD_OIL',
            label: '加油包'
          }
        ],
        unit: '',
        officialPrice: '',
        terOfValidity: '',
        dictTerOfValidityName: '',
        dictTerOfValiditySelect: [
          {
            value: 'MONTH',
            label: '月'
          },
          {
            value: 'DAY',
            label: '天'
          }
        ],
        mealSpec: '',
        dictIsTerOfValiditySuper: '',
        unitSelect: [
          {
            value: 'G',
            label: 'GB'
          },
          {
            value: 'M',
            label: 'MB'
          }
        ]
      },
      formRules: {
        terOfValidity: [{ required: true, message: '请输入套餐有效期', trigger: 'blur' }],
        mealName: [{ required: true, message: '请输入套餐名称', trigger: 'blur' }],
        dictMealTypeName: [{ required: true, message: '请选择套餐类型', trigger: 'blur' }],
        officialPrice: [{ required: true, message: '请输入套餐价格', trigger: 'blur' }],
        dictTerOfValidityName: [{ required: true, message: '请输入有效期单位', trigger: 'blur' }],
        mealSpec: [{ required: true, message: '请输入套餐规格', trigger: 'blur' }],
        dictIsTerOfValiditySuper: [{ required: true, message: '有效期是否叠加', trigger: 'blur' }],
        unit: [{ required: true, message: '请输入套餐规格单位', trigger: 'blur' }]
      },
      firstPoolId: ''
    }
  },
  created() {
    this.id = this.$route.params.id
    this.initData()
    //console.log(this.id)
  },
  methods: {
    toBack() {
      this.$router.back(-1)
    },
    async initData() {
      const returnData = await packageDetail({
        id: this.id
      })
      //console.log(returnData)
      if (returnData._result) {
        this.form.mealName = returnData.data.mealName
        this.form.dictMealType = returnData.data.dictMealType
        if (returnData.data.dictMealType === 'SETMEAL_BASE') {
          this.form.dictMealTypeName = '基础套餐'
        }
        if (returnData.data.dictMealType === 'SETMEAL_ADD_OIL') {
          this.form.dictMealTypeName = '加油包'
        }
        if (returnData.data.dictIsTerOfValiditySuper === 'YES') {
          this.form.dictIsTerOfValiditySuper = 'YES'
        }
        if (returnData.data.dictIsTerOfValiditySuper === 'NO') {
          this.form.dictIsTerOfValiditySuper = 'NO'
        }
        if (returnData.data.dictTerOfValidity === 'MONTH') {
          this.form.dictTerOfValidityName = '月'
        }
        if (returnData.data.dictTerOfValidity === 'DAY') {
          this.form.dictTerOfValidityName = '天'
        }
        if (returnData.data.mealSpec >= 1024) {
          this.form.unit = 'G'
          this.form.mealSpec = Math.floor((returnData.data.mealSpec / 1024) * 10) / 10
        } else if (returnData.data.mealSpec < 1024) {
          this.form.unitSelect.value = 'M'
          this.form.mealSpec = returnData.data.mealSpec
        }
        this.form.officialPrice = returnData.data.officialPrice
        this.form.terOfValidity = returnData.data.terOfValidity
      }
    },
    submitPrimaryFlowPoolHandle(form) {
      this.$refs[form].validate(async valid => {
        if (valid) {
          if (this.form.dictTerOfValidityName === '天') {
            this.form.dictTerOfValidity = 'DAY'
          }
          if (this.form.dictTerOfValidityName === '月') {
            this.form.dictTerOfValidity = 'MONTH'
          }
          if (this.form.dictMealTypeName === '基础套餐') {
            this.form.dictMealType = 'SETMEAL_BASE'
          }
          if (this.form.dictMealTypeName === '加油包') {
            this.form.dictMealType = 'SETMEAL_ADD_OIL'
          }
          if (this.form.unit === 'G') {
            this.form.mealSpec = this.form.mealSpec * 1024
          }
          const returnData = await packageconserve({
            id: this.id,
            mealName: this.form.mealName, // 套餐名称
            officialPrice: this.form.officialPrice, // 套餐价格
            terOfValidity: this.form.terOfValidity, // 有效期
            mealSpec: this.form.mealSpec, // 规格
            dictIsTerOfValiditySuper: this.form.dictIsTerOfValiditySuper, // 有效期叠加
            dictMealType: this.form.dictMealTypeName,
            dictTerOfValidity: this.form.dictTerOfValidityName
          })
          if (returnData._result) {
            this.$router.back(-1)
            this.$message({ message: '流量池添加成功', type: 'success' })
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .el-container {
    .el-header {
      margin-top: 5vh;
    }
  }
  .box-card {
    width: 666px;
    margin: 70px auto;
  }
  .file_upload_box {
    display: inline-block;
    width: 200px;
    height: auto;
    position: relative;
    overflow: hidden;
  }
  .file_upload_box input[type=file] {
    position: absolute;
    left: 0;
    top: 6px;
    width: 100px;
    line-height: 25px;
    opacity: 0;
    cursor: pointer;
  }
  .file_upload_box a {
    display: inline-block;
    width: 50%;
    line-height: 25px;
    text-align: center;
    font-family: "Microsoft yahei";
    background-color: #315baf;
    color: #FFF;
    font-weight: 700;
    text-decoration: none;
  }
</style>
